<!DOCTYPE html> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<html> 
  <head> 
    
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Getting Started with Speed Tracer - Google Web Toolkit - Google Code</title> 
<script type="text/javascript"><!--
(function(){function a(){this.t={};this.tick=function(c){this.t[c]=(new Date).getTime()};this.tick("start")}var b=new a;window.jstiming={Timer:a,load:b};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;})();
 
var _tocPath_ = '/webtoolkit/_doc_toc.ezt';
var codesite_token = '61615d44d177ebe22f016e0fe65d6b72';
var logged_in_user_email = 'mikhail.kotelnikov@gmail.com';
//--></script> 
<link href="/css/codesite.pack.04102009.css" type="text/css" rel="stylesheet"> 
<script src="/js/codesite_head.pack.04102009.js" type="text/javascript"></script> 
<script type="text/javascript">CODESITE_CSITimer['load'].tick('bhs');</script> 
<link rel="search" type="application/opensearchdescription+xml" title="Google Code" href="/osd.xml"> 
 
<!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css"><![endif]--> 
 
    <link href="/css/semantic_headers.css" rel="stylesheet" type="text/css" /> 
       <link href="/webtoolkit/css/local_extensions.css" rel="stylesheet" type="text/css" /> 
  </head> 
 
  <body class="gc-documentation"> 
    
    
 
    <div id="gb"> 
 <span> 
  
   
    <b>mikhail.kotelnikov@gmail.com</b> 
    |
   
   
    <a href="/u/mikhail.kotelnikov/" 
       id="projects-dropdown" onclick="return false;"
       ><u>My favorites</u> <small>&#9660;</small></a> 
    |
   
  
    <a id="lang-dropdown" class="dropdown" href="/" onclick="return false;"><img width="13" height="13" class="globeicon" src="/images/globe2_small.png"
     ><u><span>English</span></u> <small>&#9660;</small></a> 
  
   
    | <a href="http://www.google.com/accounts/Logout?continue=http%3A%2F%2Fcode.google.com%2Fintl%2Ffr-FR%2Fwebtoolkit%2Fspeedtracer%2Fget-started.html" onclick="CODESITE_click('/gb/sc/signout');"><u>Sign out</u></a> 
   
  
 </span> 
</div> 
 
<div class="gbh" style="left: 0pt;"></div> 
<div class="gbh" style="right: 0pt;"></div> 
 
<div id="gc-container"> 
<a id="top"></a> 
<div id="skipto"> 
  <a href="#gc-pagecontent">Skip to page content</a> 
  <a href="#gc-toc">Skip to main navigation</a> 
</div> 
 
<div id="gc-header"> 
  <div id="logo"><a href="/"> 
  
  
     <img src="/images/code_logo.png" height="40" width="161" alt="Google Code" style="border:0;margin:3px 0 0 0;"> 
  
  
  </a></div> 
  <div id="search"> 
    <div id="searchForm" class="searchForm"> 
      <form id="cse" action="http://www.google.com/cse" accept-charset="utf-8" class="gsc-search-box" onsubmit="executeGSearch(document.getElementById('gsearchInput').value); return false;"> 
      <noscript> 
      <input type="hidden" name="cref" value="http://code.google.com/cse/googlecode-context.xml"> 
      </noscript> 
      <div id="gsc-search-box"> 
        <input id="gsearchInput" type="text" name="q" maxlength="2048" class="gsc-input" autocomplete="off" title="Google Code Search" style="width:345px"> 
        <div id="cs-searchresults" onclick="event.cancelBubble = true;"></div> 
        <input title="Search" id="gsearchButton" class="gsc-search-button" name="sa" value="Search" type="submit"> 
        <div class="greytext">e.g. "ajax apis" or "open source"</div> 
      </div> 
      </form> 
    </div> <!-- end searchForm --> 
  </div> <!-- end search --> 
 
 
 
 
</div> <!-- end gc-header --> 
 
 
<div id="codesiteContent"> 
 
<a id="gc-topnav-anchor"></a> 
<div id="gc-topnav"> 
  <h1>Google Web Toolkit</h1> 
  <ul id="docs" class="gc-topnav-tabs"> 
 
    <li id="home_link"> 
      <a href="/webtoolkit/" title="Google Web Toolkit home page">Home</a> 
    </li> 
  
    <li id="docs_link"> 
      <a href="/webtoolkit/overview.html" class="selected" title="Official Google Web Toolkit documentation">Docs</a> 
    </li> 
  
    <li> 
      <a href="http://googlewebtoolkit.blogspot.com/" title="Official Google Web Toolkit blog">Blog</a> 
    </li> 
  
    <li> 
      <a href="/webtoolkit/community.html" title="Community home for Google Web Toolkit">Community</a> 
    </li> 
  
    <li> 
      <a href="/webtoolkit/terms.html" title="Google Web Toolkit terms of service">Terms</a> 
    </li> 
  
    <li> 
      <a href="/webtoolkit/download.html" title="Download Google Web Toolkit">Download</a> 
    </li> 
  
 
  </ul> 
</div> <!-- end gc-topnav --> 
 
 
    <div class="g-section g-tpl-230"> 
 
      <div class="g-unit g-first" id="gc-toc"> 
        <ul> 
  <li> 
      <ul> 
        <li><a href="/webtoolkit/download.html">Downloads</a></li> 
      </ul> 
  </li> 
</ul> 
 
<div class="line"></div> 
 
<ul> 
  <li><h2>Learn More</h2> 
    <ul> 
      <li><a href="/webtoolkit/overview.html">Overview</a></li> 
      <li><a href="/webtoolkit/learnmore-sdk.html">SDK</a></li> 
      <li><a href="/webtoolkit/speedtracer/">Speed Tracer</a></li> 
      <li><a href="/eclipse/index.html">Plugin for Eclipse</a></li> 
      <li><a href="/webtoolkit/examples/">Examples</a></li> 
    </ul> 
  </li> 
  <li><h2>Get Started</h2> 
    <ul> 
      <li><a href="/webtoolkit/gettingstarted.html">SDK</a></li> 
      <li><a href="/webtoolkit/usingeclipse.html">Set up Eclipse</a></li> 
      <li><a href="/webtoolkit/speedtracer/get-started.html">Speed Tracer</a></li> 
      <li><a href="/webtoolkit/doc/latest/tutorial/index.html">Tutorials</a> 
        <ul> 
          <li><a href="/webtoolkit/doc/latest/tutorial/gettingstarted.html">Get Started</a> 
            <ul> 
              <li><a href="/webtoolkit/doc/latest/tutorial/create.html">Create a GWT Project</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/design.html">Design the Application</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/buildui.html">Build the User Interface</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/manageevents.html">Manage Events on the Client</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/codeclient.html">Code Functionality on the Client</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/debug.html">Debug a GWT Application</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/style.html">Apply Style</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/compile.html">Compile a GWT Application</a></li> 
            </ul> 
          </li> 
          <li><a href="/webtoolkit/doc/latest/tutorial/i18n.html">Internationalization</a></li> 
          <li><a href="/webtoolkit/doc/latest/tutorial/clientserver.html">Client-Server Communication</a> 
            <ul> 
              <li><a href="/webtoolkit/doc/latest/tutorial/RPC.html">GWT RPC</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/JSON.html">JSON</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/JSONphp.html">JSON - PHP</a></li> 
              <li><a href="/webtoolkit/doc/latest/tutorial/Xsite.html">Cross-Site</a></li> 
            </ul> 
          </li> 
          <li><a href="/webtoolkit/doc/latest/tutorial/JUnit.html">JUnit Testing</a></li> 
          <li><a href="/webtoolkit/doc/latest/tutorial/appengine.html">Google App Engine</a></li> 
          <li><a href="/webtoolkit/doc/latest/tutorial/mvp-architecture.html">MVP Architecture</a></li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li><h2>Documentation</h2> 
    <ul> 
      <li><a href="/webtoolkit/doc/latest/ReleaseNotes.html">What's New in 2.0?</a> 
        <ul> 
          <li><a href="/webtoolkit/release-notes.html">Release Notes</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideOrganizingProjects.html">Organize Projects</a></li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideCompilingAndDebugging.html">Compile &amp; Debug</a></li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasics.html">Coding Basics</a> 
        <ul> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsClient.html">Client-Side Code</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsCompatibility.html">Compatibility with the Java Language and Libraries</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsHistory.html">History</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsFormatting.html">Number and Date Formatting</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsDelayed.html">Programming Delayed Logic</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsJSON.html">Working with JSON</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsXML.html">Working with XML</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html">JavaScript Native Interface (JSNI)</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsOverlay.html">JavaScript Overlay Types</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodingBasicsDeferred.html">Deferred Binding</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideUi.html">Build User Interfaces</a> 
        <ul> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiBrowser.html">Cross-Browser Support</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiPanels.html">Layout Using Panels</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiWidgets.html">Widgets</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html">Creating Custom Widgets</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiDom.html">Working with the DOM</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiHandlers.html">Events and Handlers</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiCss.html">Working with CSS</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiBinder.html">Declarative UI with UiBinder</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideUiImageBundles.html">Bundling Image Resources</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideA11y.html">Accessibility</a></li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideI18n.html">Internationalization</a> 
        <ul> 
         <li><a href="/webtoolkit/doc/latest/DevGuideI18nLocale.html">Locale</a></li> 
         <li><a href="/webtoolkit/doc/latest/DevGuideI18nConstants.html">Constants</a></li> 
         <li><a href="/webtoolkit/doc/latest/DevGuideI18nMessages.html">Messages</a></li> 
         <li><a href="/webtoolkit/doc/latest/DevGuideI18nPluralForms.html">Plural Forms</a></li> 
         <li><a href="/webtoolkit/doc/latest/DevGuideUiBinderI18n.html">UiBinder</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideServerCommunication.html">Communicate with a Server</a></li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideTesting.html">Test with JUnit</a> 
        <ul> 
          <li><a href="/webtoolkit/doc/latest/DevGuideTestingHtmlUnit.html">HtmlUnit</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideTestingRemoteTesting.html">Remote Testing</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideTestingCoverage.html">Code Coverage</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideDeploying.html">Deploy</a></li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideOptimizing.html">Optimize</a> 
        <ul> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCodeSplitting.html">Code Splitting</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideCompileReport.html">Compile Report</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideClientBundle.html">Client Bundle</a></li> 
          <li><a href="/webtoolkit/doc/latest/DevGuideLightweightMetrics.html">Lightweight Metrics</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/RefGuide.html">Reference</a> 
        <ul> 
          <li><a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/index.html?overview-summary.html">SDK API Reference (Javadoc)</a></li> 
          <li><a href="/webtoolkit/doc/latest/RefJreEmulation.html">JRE Emulation Reference</a></li> 
          <li><a href="/webtoolkit/doc/latest/RefWidgetGallery.html">Widget List</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/FAQ.html">FAQ</a> 
        <ul> 
          <li><a href="/webtoolkit/doc/latest/FAQ_GettingStarted.html">Get Started</a></li> 
          <li><a href="/webtoolkit/doc/latest/FAQ_DebuggingAndCompiling.html">Debug and Compile</a></li> 
          <li><a href="/webtoolkit/doc/latest/FAQ_UI.html">Build the User Interface</a></li> 
          <li><a href="/webtoolkit/doc/latest/FAQ_Client.html">Develop Client-side Code</a></li> 
          <li><a href="/webtoolkit/doc/latest/FAQ_Server.html">Communicate with a Server</a></li> 
          <li><a href="/webtoolkit/doc/latest/FAQ_Troubleshooting.html">Troubleshoot</a></li> 
        </ul> 
      </li> 
      <li><a href="/webtoolkit/doc/latest/DevGuideGlossary.html">Glossary</a></li> 
      <li><a href="/webtoolkit/previousdocs.html">Docs for Previous Versions</a></li> 
    </ul> 
  </li> 
  <li><h2>Tools</h2> 
    <ul> 
      <li><a href="/eclipse/">Plugin for Eclipse</a></li>    
      <li><a href="/webtoolkit/doc/latest/RefCommandLineTools.html">SDK Command-line Tools</a></li> 
      <li><a href="/webtoolkit/speedtracer/">Speed Tracer</a> 
        <ul> 
          <li><a href="/webtoolkit/speedtracer/get-started.html">Getting Started</a></li> 
          <li><a href="/webtoolkit/speedtracer/speed-tracer-examples.html">Examples</a></li> 
          <li><a href="/webtoolkit/speedtracer/hint-description.html">Hints</a></li> 
          <li><a href="/webtoolkit/speedtracer/data-dump-format.html">Data Dump Format</a></li> 
          <li><a href="/webtoolkit/speedtracer/logging-api.html">Logging API</a></li> 
          <li><a href="/webtoolkit/speedtracer/faq.html">FAQ</a></li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li><h2>Resources</h2> 
    <ul> 
      <li><a href="/webtoolkit/articles.html">Articles</a></li> 
      <li><a href="/webtoolkit/books.html">Books</a></li> 
      <li><a href="/webtoolkit/community.html">Community</a> 
        <ul> 
          <li><a href="http://gwtgallery.appspot.com">App Gallery</a></li> 
          <li><a href="/webtoolkit/developer_spotlight.html">Developer Spotlight</a></li> 
         </ul> 
      </li> 
      <li><a href="/webtoolkit/googleapilibraries.html">Google API Libraries</a></li> 
      <li><a href="/webtoolkit/tools.html">Tools &amp; Libraries</a></li> 
      <li><a href="/webtoolkit/media_gallery.html">Presentations</a></li> 
      <li><a href="/webtoolkit/makinggwtbetter.html">Making GWT Better</a></li> 
    </ul> 
  </li> 
</ul> 
 
 
 
        <a class="hidden" href="#gc-topnav-anchor">More Google Web Toolkit resource links</a> 
      </div> 
 
      <div class="g-unit" id="gc-pagecontent"> 
        <script type="text/javascript">CODESITE_docEarlyProcessing();</script> 
 
 
        <h1 class="page_title">Getting Started with Speed Tracer</h1> 
 
 
 
<p> 
  Speed Tracer is a Google Chrome extension that helps you identify
  and fix performance problems in your web applications. It visualizes
  metrics that are taken from low level instrumentation points inside of
  the browser and analyzes them as your application runs.  Using Speed
  Tracer you are able to get a better picture of where time is being
  spent in your application.
</p> 
 
<div style="line-height: 1.6em; margin-top: 1em; font-weight: bold;"> 
  <a href="#downloading">Downloading Speed Tracer</a><br/> 
  <a href="#quick-tour">Quick Tour of Speed Tracer</a><br/> 
</div> 
 
<h2 id="downloading">Downloading Speed Tracer</h2> 
 
<p> 
Speed Tracer requires the Dev Channel version of Google Chrome. 
</p> 
 
<ol> 
  <li style="margin-bottom: 1em;"> 
    Download and install the <a href="http://dev.chromium.org/getting-involved/dev-channel#TOC-Subscribing-to-a-channel">Google Chrome Developer Channel</a> version of Google Chrome. This version is instrumented to work with Speed Tracer.
  </li> 
  <li style="margin-bottom: 1em;"> 
    Start Google Chrome with the following flag:
    <div style="margin-top: 6px;"> 
      <code>--enable-extension-timeline-api</code> 
    </div> 
    <br/> 
    You can either launch Google Chrome from the command line with this
    flag, or you can modify your desktop settings.
    <h3>Windows</h3> 
    <p> 
      In Microsoft Windows, you can set this flag by modifying the desktop
      shortcut.  First, right-click on the Google Chrome shortcut icon,
      choosing Properties:
    </p> 
    <img src="images/windows-cmdline-1.png" width="312" height="340"> 
    <p> 
      Then, paste the <code>--enable-extension-timeline-api</code> flag into the Target field at the very end of the string.
    </p> 
    <img src="images/windows-cmdline-2.png" width="416" height="566"> 
    <p> 
      Click OK to save the setting and dismiss the dialog.  To start Google Chrome, double-click on the shortcut icon you just modified.
    </p> 
 
    <h3>Mac OS X</h3> 
    <p> 
      On Mac OS X you will need to download the <a 
      href="http://dl.google.com/gwt/speedtracer/ChromeWithSpeedTracer.dmg">Speed
      Tracer bootstrap application</a> which will launch Google
      Chrome with the appropriate flag. <b>Quit Google Chrome</b> and
      then run the "ChromeWithSpeedTracer" application that you just
      downloaded. Please ensure that you are running the Dev Channel
      version of Google Chrome.
    </p> 
  </li> 
 
  <li> <a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dognampngfcbddbfemdapefohjiobgbdl%26uc%26lang%3Den-US">Install Speed Tracer</a> <br/> 
    <a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dognampngfcbddbfemdapefohjiobgbdl%26uc%26lang%3Den-US"><img style="border:0" src="images/install-speedtracer.png" /></a><br/> 
    <p>By installing this extension, you agree to the <a href="https://chrome.google.com/extensions/intl/en/gallery_tos.html">Google Chrome Extension Gallery Terms of Service</a>.</p> 
    <p>If you run into trouble, first check the <a href="faq.html">FAQ</a>, then try the <a href="http://groups.google.com/group/speedtracer">Speed Tracer Google Group</a>.
  </li> 
</ol> 
 
 
<h2 id="quick-tour">Quick Tour of Speed Tracer</h2> 
 
<p>Here's a quick tour of the user interface. </p> 
 
<ol> 
 
  <li><p> 
  With Chrome started as in the previous section, browse to a page you wish to profile.
  </p> 
 
  <div class="imagegap"> 
    <img width='457' height='190' src='images/opening-tracer.png' class='noborder'/> 
  </div> 
  </li> 
 
  <li><p> 
  Click the stopwatch icon <img width='19' height='19' src="images/tracer-icon.png" style="vertical-align: -3px;"> to the right of the browser's web address field to open the Speed Tracer Monitor window and begin recording events.  You should see data being populated in the Monitor window.  To focus on the subset of data you want to analyze, click and drag the handles on the thin Overview graph, or click and drag a selection box over the main graph at the top.  Only events in the zoomed region (highlighted below) appear in the list below the timeline.
  </p> 
 
  <div class='imagegap'> 
    <img width='458' height='464' src='images/SpeedTracer-Sluggishness.png' class='noborder'/> 
  </div> 
 
  <li><p> 
  If you want to analyze page loading, press the Refresh button     <img width='31' height='27' src='images/refresh-button.png' class='noborder'/> on the browser window of the page being monitored.
  </p> 
 
  <li><p> 
  You can pause the recording of events by pressing the Record Button <a href="#Record"><img width='31' height='31' src='images/record.png' class='noborder'/></a>  in the Monitor window.  To zero out the timeline and start fresh, you can press the Reset button <a href="#Reset"> <img width='31' height='31' src='images/reset.png' class='noborder' /> </a>.
  </p> 
  </li> 
 
 
  <li><p> 
  Click on a row in the table below the graphs to get details on a particular event.
  </p> 
 
  <div class='imagegap'> 
    <img width='416' height='414' src='images/SpeedTracer-SluggishnessDetail.png' class='noborder'/> 
  </div> 
  </li> 
 
  <li><p> 
  Click the <b>Network (resources)</b> graph to see details on network events.
  </p> 
 
  <div class='imagegap'><img width='460' height='461' src='images/SpeedTracer-Network.png' class='noborder'/> 
  </div> 
  </li> 
  
  <li><p> 
  Click on a row in the event table to get details for each event.
  </p> 
 
  <div class='imagegap'> 
    <img width='460' height='465' src='images/SpeedTracer-NetworkDetail.png' class='noborder'/> 
  </div> 
  </li> 
</ol> 
 
Read on for more details of the Speed Tracer interface.
 
<!-- ################################## --> 
 
<h3 id="monitor">Speed Tracer Monitor</h3> 
 
<p> 
  This section describes the components of the Speed Tracer Monitor window.
</p> 
 
  <div class='imagegap'> 
    <img width='600' height='464'src='images/SpeedTracer-Overview.png' class='noborder'/> 
  </div> 
 
 
  <!-- ================================== --> 
  <h4 id="toolbar">Toolbar</h4> 
 
 
  <div> 
    <img width='725' height='35' src='images/toolbar.png' class='noborder'/> 
  </div> 
 
  <div class="indent"> <!-- 2nd level of indent --> 
 
    <a name="Record"></a> 
    <table class="columns"> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='31' height='31' src='images/record.png' class='noborder'/> 
        </td> 
        <td> 
          <b>Record</b> <br/> 
          Records the incoming data stream, updating the monitor.  Click to toggle between record and stop.<br/> 
        </td> 
      </tr> 
    </table> 
 
    <a name="Reset"></a> 
    <table class="columns"> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='31' height='31' src='images/reset.png' class='noborder'/> 
        </td> 
        <td> 
          <b>Reset</b> <br/> 
          Resets the data store in the Monitor window, removing the previously recorded data.<br/> 
        </td> 
      </tr> 
    </table> 
 
    <table class="columns"> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='31' height='31' src='images/save.png' class='noborder'/> 
        </td> 
        <td> 
          <b>Save</b> <br/> 
          Writes the profiling data out to a text file.  See <a href='data-dump-format.html'>Data Dump Format</a> for information on the format of this file.<br/> 
        </td> 
      </tr> 
    </table> 
    
    <table class="columns"> 
      <tr> 
        <td colspan="2"><b>Time display</b></td> 
      </tr> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='273' height='31' src='images/time-display.png' class='noborder'/> 
        </td> 
        <td> 
          Shows the total amount of data captured, plus the current range of data being displayed in the timeline graphs.<br/> 
        </td> 
      </tr> 
    </table> 
 
    <table class="columns"> 
      <tr> 
        <td colspan="2"><b>Zoom</b> (in/out/all)</td> 
      </tr> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='83' height='33' src='images/zoom.png' class='noborder'/> 
        </td> 
        <td> 
          Adjusts the amount of data shown on the timeline graphs.  The first two buttons let you zoom in and zoom out.  The third button zooms out all the way.  Zoom can also be adjusted by clicking and dragging on the graphs.<br/> 
        </td> 
      </tr> 
    </table> 
 
    <table class="columns"> 
      <tr> 
        <td colspan="2"><b>Page transition option menu</b></td> 
      </tr> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='180' height='30' src='images/page-transitions.png' class='noborder'/> 
        </td> 
        <td> 
          Contains one menu item for each page transition.  Use this menu to navigate between previous pages in the browsing session.<br/> 
        </td> 
      </tr> 
    </table> 
 
    <table class="columns"> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='31' height='31' src='images/report.png' class='noborder'/> 
        </td> 
        <td> 
          <b>Hint Report</b> <br/> 
          Displays a <a href="#hint-report">report</a> showing all hints reported since the last page transition.<br/> 
        </td> 
      </tr> 
    </table> 
 
    <table class="columns"> 
      <tr> 
        <td style="padding-right:10px;"> 
          <img width='35' height='32' src='images/help.png' class='noborder'/> 
        </td> 
        <td> 
          <b>Help</b> <br/> 
          Brings up a page of useful information about how to use Speed Tracer.<br/> 
        </td> 
      </tr> 
    </table> 
 
    </div> <!-- end of 2nd level of indent --> 
 
 
  <!-- ================================== --> 
  <h4 id="timeline-graphs">Timeline Graphs</h4> 
 
  <div class="indent"> <!-- 2nd level of indent --> 
 
    <ul> 
      <li> 
        <b>General Navigation:</b><br/> 
        <p> 
          Click on a graph to switch focus between Sluggishness and Network views in the detail table.  Click and drag on the graph to zoom in on a portion of the timeline.  Watch the following video to see how to zoom in and out on the data using the graphs.
        </p> 
        <p> 
          <object width="425" height="344"> 
            <param name="movie" value="http://www.youtube.com/v/Sn_3rJaexKc&hl=en_US&fs=1&"></param> 
            <param name="allowFullScreen" value="true"></param> 
            <param name="allowscriptaccess" value="always"></param> 
            <embed src="http://www.youtube.com/v/Sn_3rJaexKc&hl=en_US&fs=1&"
                type="application/x-shockwave-flash"
                allowscriptaccess="always"
                allowfullscreen="true"
                width="425"
                height="344"> 
            </embed> 
          </object> 
        </p> 
      </li> 
 
      <li> 
        <b>Sluggishness Graph</b><br/> 
        <p> 
          Displays an indication of how responsive the user interface is at the specified time.  Tall peaks in the graph indicate the browser is blocked for a significant amount of time.<br/> 
        </p> 
        <p> 
          <img width='660' height='113' src='images/SluggishnessGraph.png' class='noborder'/> 
        </p> 
      </li> 
 
      <li> 
        <b>Network Visualization Graph</b><br/> 
        <p> 
        Displays an indication of how much network activity occured at the specified time.  The graph displays the number of network connections concurrently in progress over time.<br/> 
        </p> 
        <p> 
          <img width='660' height='113' src='images/NetworkGraph.png' class='noborder'/> 
        </p> 
      </li> 
 
      <li> 
        <b>Hint Indicators</b> 
        <table class="columns"> 
          <tr> 
            <td style="padding-right:10px;"> 
              <img width='183' height='70' src='images/HintIndicators.png' class='noborder'/> 
            </td> 
            <td> 
              These vertical green, orange and red lines on the graph hint where Speed Tracer has flagged a potential performance problem.<br/> 
              <dl class="indent"> 
                <dt style="color:#008800;">Green</dt> 
                <dd>info (lowest priority hint)</dd> 
                <dt style="color:orange">Orange</dt> 
                <dd>warning</dd> 
                <dt style="color:red">Red</dt> 
                <dd>critical (highest priority hint)</dd> 
              </dl> 
            </td> 
          </tr> 
        </table> 
      </li> 
 
      <li> 
        <b>Current Event Callout</b> 
        <table class="columns"> 
          <tr> 
            <td style="padding-right:10px;"> 
              <img width='206' height='113' src='images/CallOut.png' class='noborder'/> 
            </td> 
            <td valign="top"> 
              When mclass="indent"oving the mouse over the Sluggishness detail view, it gives an indication of the position and duration of the event under the mouse.
            </td> 
          </tr> 
        </table> 
      </li> 
    </ul> 
 
  </div> <!-- end of 2nd level of indent --> 
 
 
  <!-- ================================== --> 
  <h4 id="overview-graph">Overview Graph</h4> 
 
  <div class="indent"> <!-- 2nd level of indent --> 
 
    <p> 
      Displays both the Sluggishness and Network graphs for the entire range of data captured since the last page transition.
    </p> 
 
    <div> 
      <img width='629' height='21' src='images/OverviewGraph.png' class='noborder'/> 
    </div> 
 
    <p> 
      <b>General Navigation:</b><br/> 
      Click and drag one of the handles to expand or narrow the range of data currently being viewed.  Click and drag the area between the handles to move the focus of the timeline graphs.
    </p> 
 
  </div> <!-- end of 2nd level of indent --> 
 
 
  <!-- ================================== --> 
  <h4 id="sluggishneess">Sluggishness Detail View</h4> 
 
  <div class="indent"> <!-- 2nd level of indent --> 
    <p> 
      A list of events is shown that corresponds to the region that is selected in the timeline.  Move or resize the timeline selection to modify which events are displayed.
    </p> 
    <p> 
      <img width='640' height='335' src='images/SluggishnessDetailView.png' class='noborder'/> 
    </p> 
 
    <ul> 
      <li> 
        <p> 
          <b>General Navigation</b><br/> 
          Use the scrollbar to view all events in the selected region of the overview graph.  Click on a row in the table to view details of the event.
        </p> 
      </lu> 
 
      <li> 
        <p> 
          <b><i>Hint</i> column</b><br/> 
          The first column can hold a colored icon that indicates a problem was flagged for the event.  The color indicates the most severe problem encountered, and the number indicates the number of problems of the highest severity.
        </p> 
      </li> 
 
      <li> 
        <p> 
          <b><i>Started</i> column</b><br/> 
          The time the event started relative to the start of the recording session in seconds.
        </p> 
      </li> 
 
      <li> 
        <p> 
          <b><i>Duration</i> column</b><br/> 
          The length of the event in milliseconds.
        </p> 
      </li> 
 
      <li> 
        <p> 
          <b><i>Type</i> column</b><br/> 
          Indicates the type of event that first triggered.  The different types of events and their meaning are described in the <a href='data-dump-format.html'>Data Dump Format</a> description.  Note that child events might actually consume more time than the parent event indicated in this column.  
        </p> 
      </li> 
 
      <li> 
        <b>Filter Icon</b> 
        <table class="columns" style="margin-top:0px"> 
          <tr> 
            <td style="padding-right:10px;"> 
              <img width='23' height='25' src='images/filter-icon.png' class='noborder' /> 
            </td> 
            <td valign="top"> 
              Clicking on the Filter icon will show the Filter panel.<br/> 
            </td> 
          </tr> 
        </table> 
      </li> 
 
      <li> 
        <p> 
          <b>Filter Panel</b><br/> 
          You can set filter criteria to determine which events are suppressed in the Sluggishness Detail view.  By default, events 3 milliseconds or less are suppressed, unless that event contains a log message or a hint.<br/> 
          <img width='454' height='57' src='images/filter-panel.png' class='noborder' /> 
        </p> 
      </li> 
 
      <li> 
        <p> 
          <b>Breakdown by Time</b><br/> 
          Indicates the top three types of events that consume the most wall clock time during the execution of this event.  This is not always the same as the parent event type.
        </p> 
      </li> 
 
      <li> 
        <b>Sluggishness Event Detail</b> (when expanded)<br/> 
        Click on a row in the table to display the event detail.  This reveals four new sections: Breakdown by Time (in the blue area), hints, Event Trace, and Details table.
        <div class='imagegap'> 
          <img width='640' height='263'src='images/SluggishnessEventDetail.png' class='noborder'/> 
        </div> 
 
        <ul style="margin-top:0px"> 
          <li> 
            <p> 
              <b>General Navigation:</b><br/> 
              Selecting an item in the Event Trace tree will update the Details table on the right.
            </p> 
          </li> 
        
          <li> 
            <p> 
              <b>Breakdown by Time Chart</b><br/> 
              Displays a full breakdown of how time was spent processing the top level event.  The chart aggregates all events by type and displays a pie slice in proportion to the amount of time spent processing each type of event. 
            </p> 
          </li> 
        
          <li> 
            <p> 
              <b>Hint tree</b><br/> 
              Displays all hint records encountered when analyzing this event.
            </p> 
          </li> 
        
          <li> 
            <p> 
              <b>Event Trace tree</b><br/> 
              Displays a hierarchical view of all events that fired during the duration of the top level event. To the left, a waterfall view of the amount of time each child event contributed is displayed.   Selecting an event in the tree will display details of the child event in the Details table.
            </p> 
          </li> 
        
          <li> 
            <p> 
              <b>Details table</b><br/> 
              Provides further details for an event selected in the Event Trace.
            </p> 
          </li> 
        </ul> 
      </li> 
 
    </ul> 
  </div> <!-- end of 2nd level of indent --> 
 
 
  <!-- ================================== --> 
  <h4 id="network">Network Detail View</h4> 
 
  <div class="indent" style="margin-top: 12pt;"> <!-- 2nd level of indent --> 
 
    <div class='imagegap'> 
      <img width='640' height='403' src='images/NetworkDetailView.png'class='noborder'/> 
    </div> 
 
    <ul> 
    
      <li> 
        <p> 
          <b>General Navigation</b><br/> 
          Selecting an row in the Detail View will expand the row to view the details of that event.
        </p> 
      </li> 
 
      <li> 
        <b>Resource Type icon</b> (first column)
        <table class="columns"> 
          <tr> 
            <td style="padding-right:10px;"> 
              <img width='28' height='29' src='images/NetworkDetail-icon.png' class='noborder'/> 
            </td> 
            <td> 
              Displays an icon that gives an indication of what type of resource (image, stylesheet, script, document, ...) the network event represents.<br/> 
            </td> 
          </tr> 
        </table> 
      </li> 
    
      <li> 
        <b>Network Resource Name column</b> (second column)
        <table class="columns"> 
          <tr> 
            <td style="padding-right:10px;"> 
              <img width='151' height='30' src='images/NetworkDetail-url.png'/> 
            </td> 
            <td> 
              Gives the short name and an abbreviated URL of the resource.  Hovering over the URL or expanding the row will show the full URL.<br/> 
            </td> 
          </tr> 
        </table> 
      </li> 
    
      <li> 
        <b>Network "Pillbox"</b> (third column)
        <table class="columns"> 
          <tr> 
            <td style="padding-right:10px;"> 
              <img width='34' height='30' src='images/NetworkDetail-pillbox.png' class='noborder'/> 
            </td> 
            <td> 
              A graphic indication of when the resource was requested, when the transfer response began and when the request finished.<br/> 
            </td> 
          </tr> 
        </table> 
      </li> 
    
      <li> 
        <p> 
          <b>Network Resource Details</b><br/> 
          Clicking on a horizontal bar reveals these network resource details, including a summary, request headers and response headers.
          <div class='imagegap'> 
            <img width='640' height='414' src='images/NetworkResourceDetails.png' class='noborder'/> 
          </div> 
        </p> 
      </li> 
    
    </ul> 
 
  </div> <!-- end of 2nd level of indent --> 
 
  <!-- ================================== --> 
  <h4 id="hint-report">Hint Report</h4> 
 
 
  <div class="indent"> <!-- 2nd level of indent --> 
    <p> 
      Displays all hints for the current page.  Clicking on one of "All", "Rule", or "Severity changes the format of the report.  Clicking on one of the column headers in the report changes the sort order.<br/> 
      <div class='imagegap'> 
        <img width='464' height='446' src='images/HintReport.png' class='noborder'/> 
      </div> 
    </p> 
 
  </div> <!-- end of 2nd level of indent --> 
 
 
 
      </div><!-- end gc-pagecontent --> 
    </div><!-- end gooey wrapper --> 
 
    </div> <!-- end codesite content --> 
 
 
<div id="gc-footer" dir="ltr"> 
  <div class="text"> 
    
      <div class="notice"><div id="notice" style="text-align: center; border: 1em 0em 1em 0em"> 
  Except as otherwise <a 
  href="http://code.google.com/policies.html#restrictions">noted</a>,
  the content of this page is licensed under the <a rel="license"
  href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
  Attribution 3.0 License</a>.
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" 
              xmlns:dc="http://purl.org/dc/elements/1.1/"
              xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <Work rdf:about="">
    <license rdf:resource="http://creativecommons.org/licenses/by/3.0/" />
  </Work>
  <License rdf:about="http://creativecommons.org/licenses/by/3.0/">
    <permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
    <permits rdf:resource="http://web.resource.org/cc/Distribution"/>
    <requires rdf:resource="http://web.resource.org/cc/Notice"/>
    <requires rdf:resource="http://web.resource.org/cc/Attribution"/>
    <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/>
  </License>
</rdf:RDF> --> 
</div> 
</div> 
    
    &copy;2010 Google -
    <a href="/">Code Home</a> -
    <a href="/terms.html">Terms of Service</a> -
    <a href="/privacy.html">Privacy Policy</a> -
    <a href="/more/">Site Directory</a> 
    <br> <br> 
    Google Code offered in:
    <a href="/intl/en/">English</a> -
    <a href="/intl/es/">Español</a> -
    <a href="/intl/ja/">日本語</a> -
    <a href="/intl/ko/">한국어</a> -
    <a href="/intl/pt-BR/">Português</a> -
    <a href="/intl/ru/">Pусский</a> -
    <a href="/intl/zh-CN/">中文(简体)</a> -
    <a href="/intl/zh-TW/">中文(繁體)</a> 
  </div> 
</div><!-- end gc-footer --> 
 
</div><!-- end gc-container --> 
 
<script type="text/javascript">CODESITE_CSITimer['load'].tick('ats');</script> 
<script src="/js/codesite_tail.pack.04102009.js" type="text/javascript"></script> 
 
 
 
 
<script type="text/javascript"> 
var _gaq = _gaq || [];
 
_gaq.push(
 
 
    ['siteTracker._setAccount', 'UA-18071-1'],
    ['siteTracker._setDomainName', 'code.google.com'],
    ['siteTracker._setCookiePath', window.location.pathname.substring(0,
        window.location.pathname.lastIndexOf('/') + 1)],
    ['siteTracker._trackPageview']
);
(function() {
  var ga = document.createElement('script');
 
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = 'http://www.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] ||
   document.getElementsByTagName('body')[0]).appendChild(ga);
 })();
</script> 
 
 
 
 
  </body> 
</html> 
 
 
 